<template>
  <!-- 网络拓扑 -->
  <div class="main-box">
    <div class="zhu">
      <div style="position: fixed; top: 71px; left: 240px">
        <el-button
          @click="anniu1"
          :style="
            show1 == false
              ? 'background:#FFF;'
              : 'background:#2558bf; color:#FFF'
          "
        >
          <i class="el-icon-connection"></i>
          树状图</el-button
        >
        <el-button
          @click="anniu2"
          :style="
            show2 == false
              ? 'background:#FFF;'
              : 'background:#2558bf; color:#FFF'
          "
        >
          <i class="el-icon-s-operation"></i>
          列表</el-button
        >
      </div>
      <!-- 树状图 -->

      <vue-echarts
        v-show="show1"
        class="chart"
        :option="option"
        :autoresize="true"
      ></vue-echarts>

      <!-- 列表 -->
      <div v-if="show2" class="wltp">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <div>
            <div>
              <el-table
                ref="table"
                @row-click="tz"
                :data="tableData"
                style="width: 99%"
                :header-cell-style="{
                  'text-align': 'left',
                  color: '#000',
                  'border-color': '#ccffff',
                  background: '#CCFFFF',
                }"
                :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
                border
                max-height="1000"
              >
                <!-- <el-table-column label="序号" width="80">
                <template scope="scope">
                  <span v-if="scope.$index + 1 < 10"
                    >00{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
                    >0{{ scope.$index + 1 }}</span
                  >
                  <span v-if="scope.$index + 1 > 99">{{
                    scope.$index + 1
                  }}</span>
                </template>
              </el-table-column> -->
                <el-table-column prop="name" label="设备名"> </el-table-column>
                <el-table-column prop="dev_id" label="MAC"> </el-table-column>
                <el-table-column prop="comm_delay" label="通讯延迟">
                </el-table-column>
                <el-table-column prop="atten" label="衰减"> </el-table-column>
                <el-table-column prop="snr" label="信噪比"> </el-table-column>
                <el-table-column prop="comm_rate" label="通讯成功率">
                </el-table-column>
                <el-table-column prop="ul_comm_rate" label="上行成功率">
                </el-table-column>
                <el-table-column
                  prop="dl_comm_rate"
                  label="下行成功率"
                  width="110"
                >
                </el-table-column>
                <!-- 复选框 -->
                <el-table-column v-if="checked" type="selection" width="50">
                  <template slot="header"></template>
                </el-table-column>
              </el-table>
            </div>
            <div style="position: fixed; bottom: 2%; right: 3%">
              <el-button v-if="checked" type="primary">确定</el-button>
              <el-button type="primary" @click="CheckboxTest()">测试</el-button>
            </div>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../../api/api";
``;

export default {
  data() {
    return {
      checked: false,

      show1: true,
      show2: false,
      activeName: "first",
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      data: [],
      options: {
        toolbox: {
          show: true,
          right: 20,
          feature: {
            mark: { show: true },
            saveAsImage: { show: true },
          },
        },

        tooltip: {
          show: true,
          trigger: "item",
          formatter: function (params) {
            return `设备名：${params.data.name}<br />MAC：${params.data.dev_id}<br />衰减：${params.data.atten}db<br />信噪比：${params.data.snr}db<br />通信成功率：${params.data.comm_rate}%<br />上行通信成功率：${params.data.ul_comm_rate}%<br />下行通信成功率：${params.data.dl_comm_rate}%<br />通信延迟：${params.data.comm_delay}ms`;
          },
        },
        series: [
          {
            type: "tree",
            orient: "vertical",
            edgeShape: "curve",
            top: "10%",
            left: "220",
            initialTreeDepth: "all",
            // symbol: "emptyCircle",
            expandAndCollapse: true,
            animationDuration: 0,
            data: [],

            itemStyle: {
              // 树图中每个节点的样式
              color: "white", // 节点未展开时的填充色
            },
            symbol: "circle", // 标记的图形
            symbolSize: 30, // 标记的图形的大小
            // orient: "vertical", // 设置图例的朝向
            roam: true,
          },
        ],
      },
      tableData: [],
    };
  },
  async mounted() {
    let res2 = await Api.get_topo_info({
      params: { sid: this.localSid },
    });
    console.log(res2);
    this.tableData = res2.result.topo_node_list;
    function getTopoTree(list) {
      const map = {};
      const treeList = [];
      list.forEach((node) => {
        if (!node.children) {
          node.children = [];
        }
        map[node.tei] = node;
      });

      list.forEach((node) => {
        if (map[node.proxy]) {
          map[node.proxy].children.push(node);
        } else {
          treeList.push(node);
        }
      });
      return treeList;
    }
    let res3 = getTopoTree(res2.result.topo_node_list);
    console.log(res3);
    let option = res3;
    let res = {
      label: {
        verticalAlign: "middle",
        align: "center",
        padding: 3,
        fontSize: 14,
        formatter: (params) => {
          let data = `${params.data.tei}`;
          console.log(params.data);
          if (params.data.snr >= 15) {
            params.data.label.backgroundColor = "#67C23A";
          } else if (params.data.snr >= 8 && params.data.snr < 15) {
            params.data.label.backgroundColor = "#409EFF";
          } else if (params.data.snr >= 3 && params.data.snr < 8) {
            params.data.label.backgroundColor = "#E6A23C";
          } else if (params.data.snr < 3) {
            params.data.label.backgroundColor = "red";
          }
          return data;
        },
        backgroundColor: "#000",
        // color:"white",
        width: 20,
        height: 20,
        borderRadius: 20,
      },
    };
    // res3[0].label = { color: "red", fontSize: "20" }; //Echarts单个节点的样式改造

    function recursiveObj(Array) {
      Array.forEach((element) => {
        Object.assign(element, res);
        if (element.children) {
          recursiveObj(element.children);
        }
      });
    }

    recursiveObj(option);
    this.options.series[0].data = option;
  },
  computed: {
    option() {
      return this.options;
    },
  },
  methods: {
    tz(row, column, event) {
      console.log(row, column, event);
      this.$refs.table.toggleRowSelection(row);
    },
    // 树状图
    anniu1() {
      this.show1 = !this.show1;
      this.show2 = false;
    },
    // 列表
    anniu2() {
      this.show2 = !this.show2;
      this.show1 = false;
    },
    // 复选框显隐
    CheckboxTest() {
      this.checked = !this.checked;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.main-box {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
}
.zhu {
  margin-left: 10px;
  width: 98%;
  height: calc(100vh - 150px);
  // background-color: coral;
  display: flex;

  .wltp {
    margin-left: 30px;
    margin-top: 30px;
    height: 50%;

    /* 去除滚动条 */
    ::v-deep .el-table th.gutter {
      display: none;
      width: 0;
    }
    ::v-deep .el-table colgroup col[name="gutter"] {
      display: none;
      width: 0;
    }
    ::v-deep .el-table__body {
      width: 100% !important;
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
}

#chartRoot {
  text-align: left;
  font-size: 15px;
  position: relative;
  left: 44.5%;
  top: 105px;
  width: 120px;
  height: 40px;
  border-radius: 8px;
  padding: 8px 20px;
  background-color: rgb(241, 241, 241);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(67, 178, 65);
  display: block;
}

td {
  padding: 2px 3px;
}

.chart {
  margin-top: 30px;
}

#chart {
  // padding: 50px;
  width: 98%;
  height: 750px;
}
</style>
